<style lang="sass" scoped>
    .container{
        background:#ff7373;
    }
    .top{
        width:100%;
        height:179px;
        background:url('../../assets/images/scanbook/bg.png') no-repeat; 
        padding:33px 50px;
        justify-content:space-between;
        .nums{
            flex:1;
            .num{
                height:70px;
                line-height:70px;
                font-size:72px;
                color:#fff;
            }
            .text{
                height:40px;
                line-height:40px;
                font-size:42px;
                color:#fff;
            }
        }
        .scan{
            width:212px;
            height:118px;
            img{
                display:block;
                height:100%;
                width:100%;
            }
        }
        .button{
            width:269px;
            height:99px;
        }
    }
    .title{
        border-radius:30px 30px 0 0;
        background:#fff;
        padding:26px 0 17px;
        width:700px;
        margin:0 auto;
        font-size:32px;
        color:#505050;
        text-align:center;
        border-bottom:1px solid #e2e2e2;
    }
    .list{
        width:700px;
        border-radius:0 0 30px 30px;
        background:#fff;
        margin:0 auto;
        flex-wrap:wrap;
        padding:40px 30px;
        .group{
            width:200px;
            margin-right:18px;
            &:nth-child(3n){
                margin-right:0;
            }
            img{
                display:block;
                width:200px;
                height:200px;
            }
            .text{
                font-size:28px;
                overflow:hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color:#505050;
                margin-top:8px;
                margin-bottom:38px;
                text-align:center;
            }
        }   
    }
</style>
<template>
    <div class="container">
        <!-- <div class="top flex">
            <div class="nums">
                <div class="num">{{list.length}}</div>
                <div class="text">本周更新</div>
            </div>
            <div @click="scan()" class="scan">
                <img src='../../assets/images/scanbook/button.png' alt="">
            </div>
        </div> -->
        <div class="top flex">
            <router-link tag="div" :to="{name:'scanbook_search'}"><img src="../../assets/images/scanbook/button1.png" class="button"></router-link>
            
            <img @click="scan('../../assets/images/scanbook/')" src="../../assets/images/scanbook/button2.png" class="button">
        </div>
        <div class="title">最近更新绘本</div>
        <div class="list flex">
            <div v-for="(item,i) in list" class="group">
                <img :src="item.faceImg" alt="">
                <div class="text">{{item.bookName}}</div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        components: {
        },
        data() {
            return {
                list:[]
            }
        },
        watch:{
        },
        created(){

        },
        mounted() {
            this.$nextTick(() => {
                $('body')[0].style.backgroundColor = '#ff7373';
                this.queryUpdateBook();
            });
        },
        methods: {
            queryUpdateBook(){
                util.ajax({
                    url:config.baseApi + 'bookMall-h5/api/select/queryUpdateBook',
                    success:(data=>{
                        this.list = data.data;
                    })
                })
            },
            scan(){
                var This = this;
                wx.scanQRCode({
                    needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                    scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                    success: function (res) {
                        var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                        result = result.split(',')[1];
                        This.checkIsbn(result).then(res=>{
                            if(res){
                                popup.alert({
                                    content:'找到这本书了！请放心阅读'
                                })
                            }else{
                                popup.alert({
                                    content:'还不能识别这么本书！</br>已经将此数据发送给官方，<br>尽快支持。'
                                })
                            }
                        })
                    }
                });
            },
            checkIsbn(isbn){
                return new Promise((resolve,reject)=>{
                    let userinfo = util.getStorage('local','userinfo');
                    util.ajax({
                        url:config.baseApi + 'bookMall-h5/api/select/checkIsbn',
                        data:{
                            isbn:isbn,
                            openId:userinfo?JSON.parse(userinfo).openid:''
                        },
                        success:(data=>{
                            resolve(data.data);
                        })
                    })
                })
            }
        },
        
    };
</script>